<template>
	<div class="my-pagination">
		<div class="left">总共{{ total }}条数据</div>
		<div class="right">
			<!-- show-size-changer -->
			<a-pagination v-model:current="current"  show-less-items :total="total" @change="onChange"
				@showSizeChange="onShowSizeChange" :pageSizeOptions="['50','100','150','200']" :defaultPageSize="50"/>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	
	defineProps({
		total: {
			type: Number,
			default () {
				return 0;
			},
		},
	});

	const PSGEEMIT = defineEmits(["change"]);

	const current = ref(1);

	const onChange = (page: number, pageSize: number) => {
		PSGEEMIT("change", {
			page,
			pageSize
		});
	};

	const onShowSizeChange = (page: number, pageSize: number) => {
		current.value = 1;
		PSGEEMIT("change", {
			page: 1,
			pageSize
		});
	};

	const changeCurrent = () => {
		current.value = 1;
	};

	defineExpose({
		changeCurrent
	});
</script>

<style lang="less" scoped>
	.my-pagination {
		display: flex;
		align-items: center;

		.left {
			color: @neutral500;
			font-family: 'SourceHanSansCN-Medium';
		}

		.right {
			flex: 1;

			:deep(.ant-pagination) {
				text-align: right;
				font-family: 'SourceHanSansCN-Medium';

				.ant-select {
					// border-radius: 4px;
					background: linear-gradient(0deg, #FFFFFF, #FFFFFF), #F3F1EE;
					box-sizing: border-box;
					
					// border: 1px solid #CACACA;
				}
				.ant-select:not(.ant-select-customize-input) .ant-select-selector{
					border: 1px solid #CACACA;
					border-radius: 4px;
				}

				.ant-pagination-prev a,
				.ant-pagination-next a {
					border: none;
					background-color: rgba(0, 0, 0, 0);
				}

				.ant-pagination-item {
					border: none;
					border-radius: 6px;

					&:hover {
						border-color: @success700;
					}
				}

				.ant-pagination-item-active {
					background-color: @success700;
					box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

					a {
						color: #fff;
					}
				}

				.ant-pagination-options {
					float: left;
				}
			}
		}
	}
</style>
